import React, { useState } from "react";
import "./video.scss";

// 视频
const VideoItem = () => {
  const toolsData = [
    {
      video:
        "https://gaoding-market.dancf.com/market-operations/independent/side/e9125628581b45f59706ff1c3bbcc268/1723027213187.mp4",
      title: "AI抠图",
    },
    {
      video:
        "https://gaoding-market.dancf.com/market-operations/independent/side/e9125628581b45f59706ff1c3bbcc268/1723027213187.mp4",
      title: "AI商品背景",
    },
    {
      video:
        "https://gaoding-market.dancf.com/market-operations/independent/side/130be7d6354e414a82d615f145f02aaa/1732622281895.mp4",
      title: "拼图",
    },
    {
      video:
        "https://gaoding-market.dancf.com/market-operations/independent/side/e1bc5136b5ba49e0ada032ba22c337a5/1723025532437.mp4",
      title: "AI消除",
    },
    {
      video:
        "https://gaoding-market.dancf.com/market-operations/independent/side/1987cab9ae634d248b9e364753414704/1723027367145.mp4",
      title: "AI变清晰",
    },
    {
      video:
        "https://gaoding-market.dancf.com/market-operations/independent/side/13019ac8a26740cc96851215be95b25e/1723025418486.mp4",
      title: "AI扩图",
    },
  ];
  const slideWidth = 200; // 每个工具项的宽度，可根据实际情况调整
  const [scrollLeft, setScrollLeft] = useState(0);
  const handlePrevClick = () => {
    setScrollLeft((prevScrollLeft) => Math.max(prevScrollLeft - slideWidth, 0));
  };
  const handleNextClick = () => {
    setScrollLeft((prevScrollLeft) => prevScrollLeft + slideWidth);
  };
  return (
    <div className="video">
      <h1>数字人 口播视频</h1>
      <button className="button" onClick={handlePrevClick}>
          &lt;
        </button>
      <div className="video-item"
      style={{
          scrollBehavior: "smooth",
          whiteSpace: "nowrap",
          transform: `translateX(-${scrollLeft}px)`,
        }}
      >
        {toolsData.map((item, index) => {
          return (
            <video
              controls
              controlsList="nodownload nofullscreen noremoteplayback noskiplevel"
              key={index}
              className="source"
            >
              <source
                src={item.video}
                type="video/mp4"
              />
            </video>
          );
        })}
       
      </div>
       <button className="button-next" onClick={handleNextClick}>
          &gt;
        </button>
    </div>
  );
};


export default VideoItem;
